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METHOD, DEVICE AND SYSTEM FOR EXTENDING A. MARK-UP 

LANGUAGE 



5 The present invention relates to a method, 

device and system for functionally extending a mark-up 
language for rendering XML compliant document data. The 
invention also relates to a computer program for 
implementing the method on a computer. 
10 aii modem web browsers support two important 

technologies, namely plug- ins and scripting for extending 
functionality of the browser. With plug- in technology, it 
is possible to extend a browser's standard functionality 
by downloading and installing separate software. 
15 Scripting refers to the possibility to include software 
(scripting code) in HTML pages that will run inside the 
browser, within the scope of the currently loaded 
document. Scripting code may interact with the user and 
allows access to the contents of the document. 
20 Currently, no standards exist to facilitate 

support for handling the extended functionality provided 
by custom tag behaviours in the standard mark-up 
languages. Some web browser development teams have 
created various incompatible solutions, often based on 
25 proprietary technology. For example, in Internet 
Explorer, version 5.5 and higher, custom tag and 
attribute behaviours are supported by means of HTML 
Component (HTC) files, which define the behaviour of 
(new) tags and attributes. This technology works only in 
later versions of Internet Explorer and derived browsers. 



30 



1 



2 



For example, Mozilla and the recent versions of Mozilla- 
based browsers, such as Netscape Communicator/ support 
the extensible Bindings Language (XBL) , which is mainly 
used for declaring the behaviour of interface components 
5 created with XUL, the extensible User Interface Language. 
XUL is mostly used to describe the interface of the 
browser application itself, although it could also be 
used for web pages. XBL could also be used to extend the 
standard set of tags that Mozilla-based browsers support . 

10 This technology works only in Mozilla-based browsers. 

As mentioned above web browsers support browser plug- in 
technology, which makes it possible to extend the 
browser's functionality by downloading and installing 
separate browser software components, and hence to 

15 achieve support for custom tag and attribute behaviours. 
This technology requires browser-specific plug-ins to be 
downloaded and installed once before a web page using 
custom tags/attributes may be visited. This prevents 
widespread use due to security considerations and the 

2 0 fact that installing plug- ins is often cumbersome. 

Also is known to use Java programs (Java 
applets) that run inside a web browser. However, not all 
browsers support this technology. Besides, different 
implementations of the Java run- time environment exist 
25 for different web browsers and operating systems. In most 
cases, loading an applet causes the browser to pause a 
few seconds in order to start up the Java virtual machine 
program, which actually runs the Java program. To access 
the Document Object Model (DOM) tree of an XML document 

3 0 loaded into a web browser's memory, the applet would 
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still have to call JavaScript functions. So while Java 
may provide a slightly more robust environment to support 
customised tag and attribute behaviours than JavaScript 
does, it is inconvenient for this purpose. 
5 Finally methods are known for converting custom 

tags and/or attributes to standard tags or alter the 
behaviour of .standard tags and attributes that use script 
code on the web server instead of the client computer. 
However, these methods require specific server 

10 technology, which cannot be deployed generically in 

different server environments since in practice server 
environment,^ -are incompatible ♦ Therefore in existing 
server environments proprietary solutions are applied for 
custom tag and attribute behaviours, 

15 A further drawback of deploying server -side 

technology is that it consumes valuable resources such as 
server-side CPU, I/O and most importantly, the bandwidth 
between server and client. 

The object of the invention is, for documents 

20 based on the XML standard, such as XHTML, without the use 
of any technology not available by default in the 
majority of modern web browsers, to facilitate usage of 
non-standard, or custom tags, to facilitate usage of non- 
standard, or custom, attributes to existing tags, and/or 

25 to control the behaviour of standard tags and attributes. 

According to a first aspect of the present 
invention a method is provided of rendering document data 
compliant with an extended XML-based mark-up language , 
comprising the steps of: 

30 - fetching the document data; 
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- parsing the document data into a document object 
model (DOM) representation bo aB to provide a tree 
structure, comprising nodes representative of the 
document data elements including tags and/or attributes; 
5 - reconstructing the document object model (DOM) 

representation by replacing the nodes of pre- specif ied 
elements of said document data elements by one or more 
nodes comprising standard XML compliant elements having 
standard tags and attributes ; 

10 - rendering the document data with the reconstructed 

document object model (DOM) representation. 

The document data elements can be standard 
elements, i.e. elements having standard tags and standard 
attributes that are pre-defined in some XML compliant 

15 standard mark-up language. These standard elements are 
known to many renderers and therefore can be handled by 
most of them. The phrase "standard element" used herein 
also includes proprietary elements, i.e. tags and 
attributes that are not defined in any of the XML 

20 compliant standard mark-up languages, but are supported 
only by specific renderers (cf . specific web browsers) . 
The present invention enables the rendering of document 
data containing proprietary elements by a wide variety of 
renderers, not necessarily being renderers that are 

25 designed for handling those specific proprietary tags 
and/or attributes. 

The document data elements can be custom 
elements as well, i.e. elements having tags or attributes 
unknown to the existing renderers. Custom elements are 

30 not pre-defined in any XML compliant standard mark-up 
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language and therefore cannot be handled properly by any 
standard renderer. 

The document data may also comprise a 
combination of one or more standard elements and one or 
5 more custom elements - 

In a preferred embodiment the pre-specif ied 
elements are elements with standard tags and/or 
attributes providing a given functionality, the pre- 
specified elements being replaced by standard XML 
10 compliant elements having one or more different tags 
and/or attributes providing a modified functionality. 
This enables the standard behavior of standard tags and 
attributes to be modified, if needed. This might for 
instance be the case when new functionalities are to be 
15 introduced in existing document data- 
in another preferred embodiment the pre- 
specif ied elements are elements with custom tags and/or 
custom attributes, the pre-specif ied elements being 
replaced by standard XML compliant elements having 

2 0 standard tags and/or attributes. This enables the 

possibility of an almost unlimited extension of the 
functionality offered by any XML based mark-up language. 

It is to be understood that the reconstructed 
document object model representation may be rendered 
25 directly, without any intermediate steps, such as 

converting the document object model representation back 
into an XML compliant file and then rendering the file in 
a browser. 

In a further preferred embodiment the method 

3 0 comprises the steps of; 
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- reconstructing the document object model (DOM) 
representation by replacing a subset of the pre- 
specified elements of said document data elements by one 
or more nodes having standard XML compliant elements with 

5 standard tags and attributes, 

- rendering the document data with the reconstructed 
document object model (DOM) ; and 

only upon triggering reconstructing the document 
object model (DOM) representation by replacing the 

10 remaining pre- specif ied elements of said document data 
elements by one or more nodes comprising standard XML 
compliant elements with standard tags and attributes. 

In this embodiment the tree structure is alive. 
This means that the tree structure is constantly checked 

15 and, if needed, changed while the document is being 

rendered, for exampled displayed on a computer screen. 
Only when needed, i.e. when a user action or an external 
event from the server requires it, the intermediate 
elements are replaced by the standard elements that 

20 actually control the behavior. In this way a run-time 
control of behavior may be accomplished. Run- time as 
defined here is meant to express the time during which 
the XML based document is actually displayed on the 
screen of the client computer or, in other words, the 

25 time during which the user may interact with the 
document . 

In a still further embodiment at least one node 
of a pre-specif ied element of said document data elements 
is replaced by one or more nodes with intermediate custom 
3 0 elements. Only upon triggering, i.e, by detecting a 
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certain specific event, for example a user action or an 
external event from the server, the further step is 
performed of reconstructing the document object model 
(DOM) representation by replacing of the at least one 
5 node of the at least one intermediate custom element by- 
one or more nodes comprising standard elements having 
standard tags and attributes. 

In a further preferred embodiment the parsing 
step comprises parsing the document data into a document 

10 object model (DOM) representation so as to provide a tree 
structure r comprising one or more nodes representative of 
standard XML compliant elements with predefined standard 
tags and/or attributes and one or more nodes 
representative of custom elements with one or more custom 

15 tags and/or one or more custom attributes; and the 

reconstructing step comprises reconstructing the document 
object model (DOM) representation by replacing* the nodes 
of custom elements by one or more nodes comprising 
standard elements . 

2 0 This includes the case wherein custom attributes 

in standard tags are handled. The software developers 
will in this case be able to make use of the knowledge 
they already have about the standard XML based mark-up 
language that ie to be extended by the invention, 

2 5 According to a second aspect of the present 

invention a device is provided for rendering document 
data compliant with an extended XML-based mark-up 
language, the document data being stored on a remote 
server and accessible through a network, the device 

30 comprising: 
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- an interface for retrieving the XML compliant 
document data from the server; 

- a parser for parsing the document data into a 
document object model (DOM) representation so as to 

5 provide a tree structure, comprising nodes representative 
of the document data elements including tags and/ or 
attributes ; 

- a reconstructor for reconstructing the document 
object model (DOM) representation by replacing the nodes 

10 of pre-specif ied elements of said document data elements 
by one or more nodes comprising standard XML compliant 
elements haying standard tags and attributes ; 

- a renderer for rendering the document data with 
the reconstructed document object model (DOM) 

1 5 r epr es ent at ion , 

According to a third aspect of the present 
invention a system is provided for rendering XML 
compliant document data, comprising a host computer on 
which the XML compliant document data are stored, a 

2 0 client computer, and a network connecting the host 

computer and client computer, wherein the client computer 
comprises : 

- a network interface for retrieving the XML 
compliant document data from the host computer; 

25 * a parser for parsing the retrieved document data 

into an object model (DOM) representation so as to 
provide a tree structure, comprising nodes representative 
of the document data elements including tags and/or 
attributes ; 

3 0 - a reconstructor for reconstructing the document 
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object model (DOM) representation by replacing the nodes 
of pre-specif ied elements of said document data elements 
by one or more nodes comprising standard XML compliant 
elements having standard tags and attributes; 
5 - a renderer for displaying the document data with 

the reconstructed document object model (DOM) 
representation . 

According to a further aspect of the invention a 
data carrier is provided, for example an optical disk, 
10 hard disk, etc., that contains a recorded computer 

program product upon whose execution by a processor the 
method as disclosed herein is carried out. 

According to a still further aspect of the 
invention a computer program is provided for carrying 
IS out, when run on a computer, for example a server 

computer or, preferably, a client computer, the steps of 
the methods as disclosed herein. 

Further advantages, features and details of the 
present invention will be elucidated on the bases of the 
2 0 following description of some preferred embodiments 
thereof. Reference is made in the description to the 
figures, in which; 

Figure 1 is a schematic representation of the 
world-wide -web topography; 
25 Figure 2 is a schematic representation of HTTP 

client/server communication; 

Figure 3a shows an example of HTML code; 
Figure 3b is a schematic representation of the 
DOM tree corresponding to the HTML code of figure 3a; 
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Figure 3c is a schematic representation of the 
DOM tree, showing the relations between the nodes of the 
tree; 

Figure 4a shows the conceptual OMT model of the 
5 Document Object Model (DOM) representation; 

Figure 4b shows the conceptual OMT model of a 
revised Document Object Model (DOM) representation; 

Figure 5 is a flow diagram of the rendering by 
the client computer of XML compliant document data. 
10 Figure 6 is a flow diagram showing the building 

of the shadow tree; 

Figures 7a- 7b are schematic representations 
showing the construction of a shadow tree; 

Figure 8 is a flow diagram showing the 
15 constructing phase of the shadow tree; 

Figure 9a shows an example of an original DOM 

tree ; 

Figure 9b show the creation of a new element; 
Figure 9c shows the addition of extra nodes ; 
20 Figure 9d shows the insertion of the new element 

and the removal of the element with the custom tag; 

Figure 9e shows the movement of children to new 
element's append node; 

Figure 10 is a flow chart showing the 
25 reconstructing phase of the DOM representation; 

Figure 11a shows another example of an original 
DOM tree, wherein nodes B and E have custom tags; 

Figure lib shows the DOM tree of figure 11a after 
reconstruction, wherein the original tree structure is 
3 0 saved and the new nodes have been added. 

10 
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Figures 12a- 12b show respectively the DOM tree 
before and after reconstruction for an example of HTML 
code of annex 1; 

Figures 13a- d show screenshots of an example of 
5 code running on a first browser (Internet Explorer) and a 
second browser (Mozilla) ; 

Figure 14a is a schematic representation of an 
incompletely reconstructed DOM tree; 

Figure 14b is a schematic representation showing 
10 the creation of a new element; 

Figure 14c is a schematic representation showing 
the addition of extra nodes; 

Figure 14d is a schematic representation of a 
further reconstructed DOM tree; 
15 Figure 15 is a schematic representation of the 

process of dynamically adding new nodes to an existing 
node in the DOM tree; and 

Figure 16 is a schematic representation of the 
process dynamically updating existing nodes of a DOM 
2 0 tree. 

The invention provides a functional extension of 
an XML-based mark-up language with custom tag and 
attribute behaviours, implemented solely with 
standardised and thus commonly available features and 

2 5 technology. The invention facilitates the use of new tags 

within a predefined mark-up language, adds new attributes 
to existing tags, and controls the behaviour of standard 
tags and attributes in documents based on the XML 
standard, such as XHTML, without the use of any 

3 0 technology not available by default in the majority of 
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modern web browsers. 

The invention pertains to the process of the 
initial parsing and rendering of XML documents as well as 
the following process of the human -computer interaction 
5 with the user interface that may be described by such 

documents. Said processes may take place in any rendering 
computer program that supports dynamic HTML 1 , for 
example modern web browsers such as Microsoft Internet 
Explorer, Netscape Communicator/ Opera, Mozilla, 

10 including any browser applications based on the 

technology of these standard browsers, or so-called 
1 derived browsers 1 - 

As mentioned earlier the invention is a method, 
system and computer program that provides functional 

15 extension of the standard tags and attributes of an XML- 
based mark-up language with new, custom, behaviours for 
tags and attributes, its implementation depending solely 
on standardised and thus commonly available features and 
technology. This technology can be any XML rendering 

2 0 software or apparatus ("renderer") that supports the 
Document Object Model (DOM) together with a scripting 
environment through which DOM data structures may be 
accessed and modified (such as JavaScript) . Examples of 
computer programs incorporating such XML rendering 

25 software include Internet Explorer 5 and up, and Mozilla 
1-1 and up. 

The invention is not restricted to any existing 
rendering technology, but pertains to any future 
rendering software (based on currently existing 
30 technology or not) that supports the techniques used by 
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the invention for handling custom tag and/or attribute 
behaviours . 

For a user of the invention, for instance a 
website programmer or an application developer, the 
5 invention appears as what could be called a w horizontal 
extension" of HTML, in that it both augments the . 
functionality of existing tags as well as provides for 
new tags that realise new functionality within the domain 
of HTML and/or XML-based mark-up languages . The invention 

10 requires no server technology to function, yet makes it 
possible to mix standard tags with new tags and 
optionally .enhance the functionality of the attributes of 
existing tags. 

Conventional HTML is oriented towards rendering 

15 documents. With DHTML, the combination of HTML, Cascading 
Style Sheets (CSS) and Javascript, interactive documents 
can be used to form graphical user interfaces . This 
approach requires creating large portions of Javascript 
code to control the interface's required interactivity. 

20 In practice, many approaches to creating DHTML user 

interface controls are characterised by relatively long 
development time, poor usability and reusability due to 
various reasons. The invention makes it -possible to 
formalise DHTML by extending XHTML with tags and 

25 attributes that implement user interface controls. This 
way, user interfaces and their corresponding interaction 
model may be elegantly declared in a high-level mark-up 
language, instead of labour-intensive programming in 
languages such as Javascript. 

30 To said high-level user interface declaration, 
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use of the invention requires no modification in existing 
infrastructure, either client-side or server-side. In 
fact, it solely depends on common functionality available 
in modern web browsers . 
5 The Worldwide Web (WWW) refers to the collection 

of publicly accessible web servers on the Internet 
(figure 1) . Individuals browsing the web contact these 
web servers through software called a browser (client) , 
which facilitates communication between a personal 

10 computer (for instance) and a web server. This 

communication uses the HyperText Transfer Protocol, or 
HTTP. The actual data sent from server to client may be 
any media format, but the most common format is HTML, an 
SGML-based mark-up language (fig- 2) . 

15 a simplified view of the workings of a web 

client is 'shown in figure 2. Incoming documents are 
processed by the renderer, the central part of a web 
browser program. The renderer converts the document to a 
tree -shaped data structure that conforms to the Document 

20 Object Model standard (DOM) as specified by the World 
Wide Web Consortium (3WC) . The contents of this data 
structure, or DOM tree, determine what is shown on, for 
instance, the computer screen or the printer- In modern 
browsers, all changes in the DOM tree are reflected to 

25 the screen output immediately. 

Besides HTML, there exists a more recently 
introduced mark-up language called XML, which is more 
structured and - contrary to HTML - defines no 
p resen tation rules when used on its own. A further 

30 development is a mark-up language known as XHTML, which 
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is an XML-based version of HTML and resembles HTML to a 
great extend, yet conforms to the stricter XML standard, 
HTML, XML and XHTML use tags and attributes as the main 
means to describe data. When, for instance, <img 
5 src=" http://www.w3 . org/ Icons /w3c main " /> is included in 
an XHTML document , this will cause an image to be 
included in the document- In this case, the tag is "img" 
and the attribute is "src", 

A DOM tree consists of nodes that have other 

10 nodes a their children- Nodes come in different types, 
the two most important ones being element and the text . 
Nodes of type element correspond to tags, type text nodes 
usually to the data between tags. Figures 3a and 3b show 
part of an example HTML file together with its 

15 corresponding DOM tree (figure 3b) , with two nodes of 
type text: xx some text'' and M bold text". Figure 3c shows 
the underlying relationships in a DOM tree with more 
detail, with arrows for the node references to first 
child, last child, previous sibling, next sibling and 

20 parent. 

Figure 4a is an OMT model depicting one of the 
preferred embodiments of the invention. This model does 
not necessarily represent any actual implementation of 
the invention; it merely illustrates the nature and 

25 results of the invention according to the object-oriented 
paradigm. In this logical model, the invention may be 
identified as the BACKBASE Element class ♦ As can be seen 
in figure 4a , one may think of all standard HTML tags, 
such as <b> and <div>, to be derived from class DOM 

30 Element. In figure 4b, these tags now logically "inherit 7 
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functionality from BACKBASE Element. So for instance, if 
an application of the invention implements drag-and-drop 
functionality by defining and implementing the behaviour 
of the tags 'draggable 1 and 'dropreceiver 1 , DOM Elements 
5 corresponding to standard tags could, if attribute 

draggable was set to "yes", be dragged and dropped into, 
say, a <div> element with attribute dropreceive set to 
true - 

According to a preferred embodiment the method 
10 for the display of XHTML data is as follows: 

l.The renderer fetches the XML data ( ^document" ) , for 
instance an XHTML file, from a file system or web 
server (figure 5) using standard means such as HTTP. 
15 2. The renderer parses this document and creates a 

corresponding DOM tree that reflects the structure of 
the document. 

3. During or after step (2), the renderer creates a 
representation of the DOM tree on its current output 
20 device, in most cases a computer screen. Unknown tags 
and/or attributes are ignored. However, they are 
represented in the document's DOM tree. Normally, the 
process stops at this point - 

25 The DOM tree is preferably, but not necessarily, 

modified in a two-phase process (see also figure 6) : 
Phase 1: Build shadow tree phase. A secondary tree 
structure, the * shadow tree", is created, in which the 
current (original) DOM structure is saved. 

30 Phase 2: DOM tree reconstruction phase. The DOM tree is 



16 



17 



10 



modified on a node-by-node basis by a) replacing certain 
elements with new nodes, and b) modifying certain 
properties of certain elements. 

Although creating the shadow tree is not an 
absolute requirement for the invention to work, saving 
the composition of the DOM tree before modifying allows 
easy access to the original structure later. The shadow 
tree is created by saving the following properties (table 
1) of every element in alternative data members: 

Table 1 List of DOM element properties and corresponding 
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DOM Element property 


Shadow Tree property 


f irstchild 


oFirst 


lastChild ' 


oLast 


nextsiblirig 


oNext 


previousS ibl ing 


oPrev 


parentNode 


oParent 



In this embodiment the shadow tree is created by 
traversing the document's DOM tree node for node. Figures 
7a-7c show how the original DOM tree relationships are 
saved in the shadow tree, and what the effect after 
reconstruction is. Figure B describes the algorithm using 

a flow diagram: 

1. The algorithm starts at the root node of a 
DOM tree, often the body of the document. 

2. The five attributes listed in the table above 
are initialised with null values. 

3. If the node has no child nodes, the process 
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ends . 

4. When a child node is added to its parent in 
the shadow tree/ the parent's oPirst and oLast properties 
are updated as needed. Also, the oPrev, oNext and oParent 

5 properties of the child node and its siblings the shadow 
tree are updated as necessary. 

5. For every child, a recursive call is made so 
that the algorithm may backtrack after having reached the 
leaves of a part of the DOM tree. (This step was 

10 introduced to make the flowchart clearer, but does not 
represent a favourable programming approach.) 

6. If the type of the child node is not element, 
go to step 5 (text nodes, comment nodes etc. are skipped 
and do not form part the shadow tree) - 

15 7 . The process continues at step 2 for the 

current child node. 

The'above method is further elucidated in 
figures 7a-7c. Figure 7a shows the original DOM tree. 

20 Node A has node B as only child. Figure 7b shows the 

situation after step 1, just before reconstruction. The 
original tree relationships have been saved in the shadow 
tree. Figure 7c shows the situation after step 2. Node B 1 
has replaced node B, while the original tree structure is 

25 still intact. 

In the reconstruction phase of the DOM tree, the 
method traverses the DOM tree node for node- Starting for 
example from the DOM tree shown in figure 9a , when an 
element with a custom tag ("custom element") is 

30 encountered, a new node is created (for example, a <div=> 
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element in figure 9b) . Optionally, additional nodes 
(depending on the custom tag's implementation 
requirements) are added to this new node (two <div> 
elements in figure 9c; the one labelled "append" will 
5 serve to contain the custom element's children) . The new 
node is inserted in the parent's children list 
immediately before the custom element (figure 9d) . 
Afterwards, the element with the custom tag is removed 
from the DOM tree (figure 9d) . Figure 9e shows how the 
10 children of the custom element are moved to the new node 
(or to part of the subtree the new node is root of - the 
element labelled "append" in figure 9e) . Finally, the new 
node and the custom element are mutually connected by 
giving each of them a property containing a reference to 
15* the other (cf. dotted line in figure 9e) . This way, the 
original node and all its attributes or other data node 
remain accessible. 

Figure 10 provides a detailed description of the 
method for custom tag and custom attribute support- In 
20 this embodiment the method comprises the steps of: 

l.The algorithm starts at the original root element 
(NODE) of a DOM tree, often the body of the document. 
2* If the tag of NODE is not supported by the invention, 
jump to step 20. 
25 3. A new node, called NEWNODE, mostly of type element, 
is created. 

4. If no attributes (standard and/or custom) supplied 
for the node might affect NEWNODE and therefore need no 
processing, proceed to step 6. 
3 0 5 . Process NODE 1 s attributes . 
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6. If no extra nodes (like the two elements in figure 
9c) are needed, jump to step 9. 

7. The extra nodes (which can themselves have child 
nodes) are created and added to NEWNODE. 
8. One of the extra nodes, called APPENDNODE, is 
assigned to be the container of the original node's 
child nodes, (in some practical cases, this role may be 
assigned to various child nodes). Continue at step 10. 
9. APPENDNODE is set to be the newly created node. 
10. If the original node has no parent node, proceed to 
step 13 . 

11. NEWNODE is added to the original node's parent by 
inserting it immediately before (or after) NODE. 

12. The original node is removed (disconnected) from its 
15 parent . 

13. If NODE has no child nodes, continue at step 16. 

14. Move the first (remaining) child node from the 
original node to APPENDNODE. Jump back to step 13. 

15. Mutually connect NEWNODE and NODE to each other 
(i.e. both get an attribute that references the other). 
16. If APPENDNODE has no child nodes (the original node 
would have had none either) , the process exits . 
Otherwise, "children" now denotes the APPENDNODE ' s 
child nodes. 

17. For every child in "children" , a recursive call is 
made so that the algorithm may backtrack after having 
reached the leaves of a part of the DOM tree. (This 
etep was introduced to make the flowchart clearer, but 
does not represent a favourable programming approach.) 
18. if the type of the child node is not element, go to 
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step 17 (text nodes, comment nodes etc. are skipped as 
they have no possible custom tag themselves nor have 
any children that might) , 

19. The process continues at step 2 for the current 
5 child node (NODE now refers to that child node) - 

20. If no attributes (standard and/or custom) supplied 
for NODE need processing, proceed to step 22. 

21. Process NODE'S attributes. 

22. If NODE has no child nodes, the process exits. 
10 Otherwise, ^children" now denotes the NODE 1 s child 

nodes; proceed at step 17. 

The above method steps are further elucidated in 
figures 11a and lib 

For clarity, figure lib shows a detailed view (including 
15 all relationships) of the combined result of step 1 and 

step 2 on the DOM tree shown in figure 11a « 

Table 2 shows example XHTML source code that 

depends on the invention (referred to as 

1 backbase_mini . j s 1 ) to implement the required 
2 0 functionality for the tree tag and the tooltip attribute. 

Figure 12a depicts the DOM tree for this example XHTML 

code. In figure 12b the structure of the DOM tree after 

reconstruction is shown. 

25 Table 2 Example of XHTML source code 

^htmi xmlns: b="http":7/www.backbase . com" > 

<head> 

<script type=" text /javascript" 
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src= "backbase_mini o s « ></ script > 
</head> 

<body onLoad="MASTER_CONTROL_PROGRAM_INIT() ;"> 
<b: tree> 

1 . tree root 

<b:tree tooltips" item l">item 

1 * 2</b: tree> 

<b:tree tooltip="iteTn 2" >item 

1.2</b;tree> 

</b : tree> 

</body> 
</html> 

Appendix 1 is a working minimal implementation of 
the invention that supports the tree tag and the tooltip 
attribute. The shadow tree phase is not implemented in 
this code. Figures 13a-13d show screenshots of Microsoft 
5 Internet Explorer and Mozilla running the code in table 2 
and appendix 1 . Figure 13a shows a screenshot of an 
example of code running in the Internet Explorer browser. 
Figure 13b shows a screenshot of the example of figure 
13a, after clicking the "tree root" and hovering over 
10 h item 1.2". Figures 13c and 13d show corresponding 

screenshots if another web browser (Mozilla) is used* 
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Another preferred embodiment of the present 
invention ia explained in figures 14a- 14d. In this 
embodiment only one of both custom elements (with a 
custom tag and/or a custom attribute) is replaced in the 
5 reconstructing phase. Only after a delay the remaining 
custom element (a) are reconstructed into their 
corresponding final standard elements. If we consider the 
example of figure 9d, we see that the first custom 
element <custl> has been reconstructed. However, the 

10 second custom element <cuet2> has not yet been 

reconstructed. For example, at start-up of the browser 
reconstructs the DOM tree by replacing the first custom 
element only. Only in a later stage when the 
reconstructed first custom element is activated, the DOM 

15 tree is restructured again by replacing the second custom 
element <cust2> by one or more standard elements, as is 
shown in figures 14b-14d. 

In a further preferred embodiment one or more new 
elements are added dynamically, i.e. at run time of the 

20 program, to an existing element. This is shown in figure 
15 wherein new element <new> is added to the existing 
first element <origl>. The new elements may be loaded by 
the renderer at any stage, i.e. at start-up and at-run 
time. The new elements may be standard elements or custom 

25 elements ♦ In another preferred embodiment one or more 
existing elements can be replaced by one or more new 
(standard and/or custom) elements. This is for example 
shown in figure 16, wherein the existing third element 
<origl> of the tree is replaced by a new node <new> that 

30 may provide a different behavior. 



23 



24 



The present invention is not limited to the 
above-described preferred embodiments thereof; the rights 
sought are defined by the following claims, within the 
scope of which many modifications can be envisaged. 
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S APPENDIX 1 



function oBrowser () { 

var SUA - navigator - userAgent . toLowerCase ( ) ,- 
this.ie = ( (sUA.indexOf ( 'msie 1 ) != -1) && 
10 (sUA.indexOf ( 'opera' ) ==» -1)) ? true : false; 
return this ; 

} 

var oBrowser , oBody , oToolTipNode = null; 
function MASTER_CONTR0L_PR0GRAM_INIT () { 
15 oBrowser = new oBrowser (); 

oBody « (oBrowser. ie && document . documentBlenient && 
document .body. clientHeight <= 20) ? 

document .documentEJlement : oBody = 

document . body ; 
2 0 DOMJRecons tract (oBody, false) ; 

function DOM_GetAtt (sAtt , oMode) { return oBrowser. ie ? 
©Node [ aAt t ] : oNode . getAt tribute ( sAt t ) ; } 

2S function DOMJMormalizeTag (oNode) { 

if (oBrowser -ie) var sTag « oNode . tagName; 
else { 

var sTag = oNode. nodeName. split ( 1 : ') til; 
if (IsTag) sTag « oNode.nodeName; 

30 } 

if (sTag) oNode.sTag - STag . toUpperCase ( ) ; 

function DOM_Reconatruct (oNTode) { 
DOM_NormalizeTag (oNode) ; 
35 i f ( oNode , STag = * ' TREE 1 ) PARSE JTREE ( oNode ) ; 

else { 

oNbde.oElm - oNode; 
oNode.oBlm.oNode » oNode; 
DOMJRe construct Kids (oNode) / 

40 } 

if (DOM_GetAtt ( 1 tooltip 1 , oNode ) ) £VENT_Add (oNode . oElm ? 

oNode.oElm : oNode) ; 

function DOM_ReconstructKids (oNode) { 
45 for (var i = 0; i < ©Node , childNodes .length; i++) { 

var oKid ■ oNode - childNodes [ij ; 
if (oKid.nodeType ««- 1) DOM Reconstruct (oKid) ; 

} 

5 0 function BUILD_CreateReplaceElm(sTag, oNode) { 

var oElm » document . createElement (sTag) ; 
i f ( oNode . parentNode ) { 



5 oNode ,parentNode „ insertBef ore (oElm, oNode) ? 

oNode . parentNode . removeChild (oNode) ; 

} 

while (oMode - childNodes . length) 
oElta. appendChild (oNode. childNodes to] ) ; 
10 oElm.oNode = oNode; 

oNode.oElm = oElm; 
oElm.aTag = oNode.sTag; 
return oElm; 

} 

15 function PARSE JTREE (oNode) { 

var oElm = BUILD_CreateReplaceElm ( 'DIV , oNode) / 
oNode . oLabel = document „ createElement ( 1 SPAN ' ) ; 
oNode . oNes tedTrees = document - createElement { 1 DIV 1 } ; 
oNode - oNes tedTrees . style .paddingLeft = 1 lOpx ' ; 
20 oNode.oNestedTreee .style. display = 'none 1 ; 

while (oElnu childNodes. length) { 

var oChildNode « oElm, childNodes [0] ? 
DOM_NormalizeTag(oChildNade) ; 
if (oChildNode.sTag == 1 TREE 1 ) 
25 oNode . oNestedTrees „ appendchild (oChildNode) 

else oNode - oLabe 1 . appendChi 1 d ( oChi 1 dNode ) ; 

} 

oElm . appendChild (oNode . oLabel ) / 
oElm. appendChild (oNode , oNestedTreea) ; 
30 if {oNode. oNestedTrees. childNodes. length) { 

oNode.oLabel-oNode « oNode; 

oNode . ofcab el . one 1 i ck « TREE_CLI CK ; 

} 

DOM_ReconstructKids(oNode.oLabel) ; 

35 } 

function TREE_CLICK (eEvent > { 

var oNode = this.oNode; 
if ( J oNode . oNestedTrees . bRendered) { 
for (var i - 0; i < 
40 oNode . oNestedTrees . childNodes . length; i++) 

D0M_ Reconstruct (oNode . oNestedTrees - childNodes [i] ) ; 
oNode . oNestedTrees .bRendered = true ; 

45 if (oNode .oNestedTrees. childNodes. length) { 

oNode . oNestedTrees - style * display * oNode . bOpen 

? 1 none ' : 1 ' ; 

oNode.bOpen - I oNo de - bop en ; 

} 

50 } 

function EVENT_Add(oElm) { 
if (oBrowser . ie) { 

oElm - onmouseover EVENT_Over; 
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oElm.onmouseout » EVENT_Out; 

} else { 



oElm. addEventListener ( 'mouseover 1 , EVENTjDver , false) ; 

1 0 oElm . addEventListener ( 1 mouseout 1 , EVENT_put , false ) 

} 

} 

function EVENT_FindNode (oElm) 
{ 

15 var oNode = oElm.oNode; 

if (loNode) { 

while (oElm.parentNode) { 

oElm - oElm.parentNode; 
if ( oElm . oNode ) break ; 

20 } 

oNode = oElm.oNode; 

} 

return oNode; 

25 function EVENTJDver (eEvent) { 

var oElm = oBrowser.ie ? window - event . ercElement : this; 
oNode » EVENT_FindNode (oElm) ; 
if (DOM__GetAtt ( 1 tooltip ' , oNode) ) { 
if ( i oToolTipNode) ( 
30 oToolTipNode = 

document -createElement ( 'DIV 1 ) 

oToolTipNode. style -position = 

1 absolute 1 ; 

oToolTipNode . style .backgroundColor = 

3 5 '#BEEEEE'; 

oBody . appendChi Id ( oToolTipNode ) ; 

} 

oToolTipNode . innerHTML « 
DOM_GetAtt ( 1 tooltip 1 , oNode) ; 

4 0 ~ oToolTipNode. style .left = _iMouseX + 'px 1 ; 

OToolTipNode . style . top = _iMouseY + 1 px ! ; 
oToolTipNode. style. display = 1 ' ; 

} 

if (! eEvent) eEvent « window * event ; 
45 if (eEvent . stopPropagation) eEvent - stopPropagation ( ) ; 

else eEvent . cancelBubble = true; 
return false; 

} 

function EVENT_put (eEvent) { 
50 var oElm « oBrowser.ie ? window. event .srcEleraent : this; 

oNode m EVENT_FindNode(oElm) ; 

if (DOM_GetAtt ( 1 tooltip 1 , oNode) ) 
oToolTipNode . style . display = 1 none ' ; 



5 if U eEvent) eEvent = window . event ; 

if (eEvent . stop Propagation) eEvent , stopPropagation ( ) ; 
else eEvent .cancelBubble - true; 
return false; 

} 

10 var _iMouaeX,_iMouseY; 

function EVEOT_MouseMbve (eEvent )" { 

_iMouseX m (oBrowser . ie) ? event. x - 2 : eEvent .pageX; 
_iMouseY = (oBrowser, ie> ? event, y - 2 : eEvent .pageY; 

} 

15 document . onmousemove « EVENT MouseMove; 
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1 . Method of rendering document data 
compliant with an XML-baaed mark-up language , 
10 comprising the steps of: 

- fetching the document data; 

- parsing the document data into a document 
object model (DOM) representation so as to provide a 
tree structure/ comprising nodes representative of the 

15 document data elements including tags and/or 
attributes; 

- reconstructing the document object model (DOM) 
representation by replacing the nodes of pre- specif ied 
elements of said document data elements by one or more 

20 nodes comprising standard XML compliant elements 
having standard tags and attributes; 

- rendering the document data with the 
reconstructed document object model (DOM) 
rep re sent at i on . 

25 2- Method according to claim 1, wherein the 

pre-specif ied elements are elements with standard tags 
and/or attributes providing a functionality, the pre- 
specified elements being replaced by standard XML 
compliant elements having one or more different tags 

30 and/or attributes providing a modified functionality. 

3- Method according to claim 1 or 2, wherein 
the pre-specif ied elements are elements with custom 
tags and/or custom attributes, the pre-specif ied 
elements being replaced by standard XML compliant 



5 elements having standard tags and/or attributes . 

4 . Method according to any of the preceding 
claims, comprising the steps of: 

- reconstructing the document object model (DOM) 
re p rese ntation by replacing a subset of the pre- 

10 specified elements of said document data elements by 
one or more nodes having standard XML compliant 
elements with standard tags and attributes; 

- rendering the document data with the 
reconstructed document object model (DOM) ; and 

15 - only upon triggering reconstructing the 

document object model (DOM) representation by 
replacing the remaining pre-specif ied elements of said 
document data elements by one or more nodes comprising 
standard XML compliant elements with standard tags and 

20 attributes. 

5. Method according to claim 4, wherein 
triggering' is caused during run-time by user action or 
an external event. 

6. Method according to any of the preceding 

25 claims, where in : 

- the parsing step comprises parsing the document 
data into a document object model (DOM) representation 
so as to provide a tree structure, comprising one or 
more nodes representative of standard XML compliant 

3 0 elements with standard tags and/or attributes and one 
or more nodes representative of custom elements with 
one or more custom tags and/ or one or more custom 
attributes; and 

- the reconstructing step comprises 



5 reconstructing the document object model (DOM) 
representation by replacing the nodes of custom 
elements by one or more nodes comprising standard 
elements, 

7 . Method according to any of the preceding 
10 claims, wherein the step o£ reconstructing the 

document object model (DOM) representation comprises 
accessing and modifying the DOM representation data by 
executing program code, preferably script code. 

8 . Method according to claim 7 , wherein a 
15 JavaScript interpreter is applied to execute the 

script code . 

9. Method according to any of the preceding 
claims, wherein the step of reconstructing the DOM 
representation comprises the steps of: 

20 a) traversing the DOM representation node for 

node recursively; 

b) upon detecting a node that is to be replaced: 

bl) creating a new node of standard 
elements; 

25 b2) optionally creating a subtree of one or 

more additional nodes by adding these additional 
nodes to the newly created node; 

b3) inserting the new node and the 
additional nodes, if any, into the parents 

30 children list of the document object model (DOM) 

representation on a position immediately before 
or after the node representative of the node that 
is to be replaced; 

b4) removing the node that is to be replaced 



5 from the document object model (DOM) 

represent at i on ; 

b5) moving one or more children of the 
removed node that was to be replaced to the new 
node or to a preset additional node, if any, that 
10 is part of the subtree the new node is root of. 

10. Method according to claim 9, comprising 
the step of mutually connecting the new node and said 
node that was to be replaced . 

11- Method according to claim 10, wherein the 
15 step of connecting comprises providing both the node 
of the node that was to be replaced and the new node 
with an attribute containing a reference to one 
another . 

12. Method according to any of the preceding 
20 claims, comprising after the step of parsing the 
document data into a document object model (DOM) 
representation the additional step of saving the 
current document object model (DOM) representation in 
a document object model (DOM) shadow representation. 
25 13. Method according to claim 12, comprising 

saving the DOM element attributes first child, last 
child, next sibling, previous sibling, and parent 
node. 

14. Method according to claim 12 or 13, 
3 0 comprising traversing the DOM representation node for 
node and saving the DOM representation into the DOM 
shadow representation, by 

a) starting with some root node; 

b) initializing at least the attributes 



5 representative of the first child node, the last child 
node, the next sibling node, the previous sibling 
node, and the parent node with predefined start 
values, preferably null values? 

c) detecting if the node has a child node; 
10 d) if the node has a child node, then add that 

child node to the node in the DOM shadow 
representation by updating the values of attributes 
f irstChild and lastChild of the node and updating the 
values of attributes previousSibling, nextSibling and 
15 parentNode of the child node and, where necessary, its 
new siblings;': 

e) repeating steps b-d for every further 
child node. 

15. Method according to any of the preceding 
20 claims, wherein the step of fetching the document data 

comprises fetching the data from a remote server. 

16. Method according to any of the preceding 
claims, wherein the step of rendering the document 
data with the reconstructed document object model 

25 (DOM) representation is performed by a standard 
browser* 

17. Method according to any of the preceding 
claims , comprising : 

- reconstructing the document object model (DOM) 
3 0 representation by replacing at least one node of a 

pre- specified element of said document data elements 
by one or more nodes with intermediate custom 
elements, 

- rendering the document data with the 
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5 reconstructed document object model (DOM) using the at 
least one intermediate custom element; and 

- upon triggering the step of reconstructing the 
document object model (DOM) representation by 
replacing of the at least one node of the at least one 

10 intermediate custom element by one or more nodes 

comprising standard elements having standard tags and 
attributes'. 

18. Method according to any of the preceding 
claims, wherein the XML compliant document data is an 

15 XHTML document. 

19. Method according to any of the preceding 
claims, comprising the step of dynamically adding one 
or more new elements to an existing element. 

20. Method according to any of the preceding 
20 claims, comprising the step of dynamically replacing 

one or more existing elements by one or more new- 
elements * 

21- Device of rendering document data 
compliant with an extended XML-based mark-up language, 
25 the document data being stored on a remote server and 
accessible through a network, the device comprising: 

- an interface for retrieving the XML compliant 
document data from the server ; 

- a parser for parsing the document data into a 
30 document object model (DOM) representation so as to 

provide a tree structure, comprising nodes 
representative of the document data elements including 
tags and/or attributes; 

- a reconstructor for reconstructing the document 
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20 



object model (DOM) representation by replacing the 
nodes of pre-s P ecified elects of said document data 
elements by one or more nodes comprising standard XML 
compliant elements having standard tags and 
attributes? 

- a renderer for rendering the document data with 
the reconstructed document object model (DOM) 

representation. 

22 Device according to claim 21. wherein the 
pre -specifled elements are elements with standard tags 
and/or attributes providing a functionality and the 
^constructor is adapted so as to replace the ore- 
specified elements by standard XML co^liant elements 
Wing one or more different tags and/or attributes 
providing a modified functionality. 

23 Device according to claim 21 or 22, 
wherein the pre-specif ied elements are elements with 
custom tags and/or custom attributes and the 
reconstructor is adapted so as to replace the pre- 
specified elements by standard XML, compliant elements 
, having standard tags and/or attributes 

24 Device according to claim 21, 22 or 23, 
wherein the reconstructor is adapted so as to perform 
the method steps of one of the claims 4-20. 

25 . A system for rendering XML compliant 

• * host computer on which the 

0 document data, comprising a host oomp 

XML, compliant document data are stored, a 
colter, and a networ* connecting the host computer 
JTdient computer, wherein the client computer 
comprises : 



•t ier.*»e7ne I cj. 
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5 - a network interface for retrieving the XML 

compliant document data from the host computer; 

- a parser for parsing the retrieved document 
data into an object model (DOM) representation so as 
to provide a tree structure/ comprising nodes 

10 representative of the document data elements including 
tags and/or attributes ; 

- a reconstructor for reconstructing the document 
object model (DOM) representation by replacing the 
nodes of pre-specif ied elements of said document data 

15 elements by one or more nodes comprising standard XML 
compliant elements having standard tags and 
attributes; 

- a renderer for displaying the document data 
with the reconstructed document object model (DOM) 

2 0 representation . 

26. System according to claim 25, wherein the 
reconstructor and/or renderer are adapted so as to 
perform the method steps according to one of the 
claims 1-20. 

25 27. Device comprising a computer program 

product and at least one processor, the computer 
program product comprising instructions for causing 
the processor to execute the method steps of any one 
of claims 1-2 0, 

30 26. Data carrier containing a recorded 

computer program product upon whose execution by a 
processor the method according to any of claims 1-20 
is carried out • 



29. Computer program for carrying out, when 
run on a computer, the ateps of any of the method 
claims 1-20. 
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